<template>
  <div class="user-page">
    <!-- 1. 顶部栏  -->
    <div class="header">
      <van-image
        width="60"
        height="60"
        fit="cover"
        round
        :src="userInfo.photo"
        @click="$router.push({path:'/edit'})"
      />
      <h2>
        {{ userInfo.name }}
        <br />
        <van-tag color="#fff" text-color="#009afa">{{
          userInfo.birthday
        }}</van-tag>
      </h2>
    </div>
    <!--2. 用户链接 -->
    <van-row>
      <div>
        <van-col span="8"
          ><van-icon name="newspaper-o" color="#88c1ff" />
          我的作品
        </van-col>
      </div>
      <div>
        <van-col span="8"
        ><van-icon name="star-o" color="#ff686e" /> 我的收藏</van-col
      >
      </div>
     <div>
        <van-col span="8"
        ><van-icon name="tosend" color="#ffa609" /> 浏览历史</van-col
      >
     </div>
    </van-row>

    <!-- cell 列表  -->
    <van-cell-group>
      <van-cell
        icon="edit"
        title="编辑资料"
        is-link
        @click="$router.push({ path: '/edit' })"
      />
      <van-cell icon="chat-o" title="小智同学" is-link />
      <van-cell icon="setting-o" title="系统设置" is-link />
      <van-cell icon="warning-o" title="退出登录" is-link @click="exitUser" />
    </van-cell-group>
  </div>
</template>
   


<script>
//导入接口
import { getUserInfo } from "./user.js"; //用户信息接口
// 导入token接口
import { removeToken } from "@/utils/token.js"; //token 接口

export default {
  name: "user",
  data() {
    return {
      userInfo: {},
    };
  },
  created() {
    //请求个人信息
    getUserInfo().then((res) => {
      // console.log(res);
      //1 绑定数据
      this.userInfo = res.data.data;
      //2 更新到vuex
      this.$store.commit("updateUserInfo", res.data.data);
    });
  },
  methods: {
    exitUser() {
      this.$dialog
        .confirm({
          title: "确定退出吗？",
        })
        .then(() => {
          // 用户点击确认执行的回调
          console.log("then");
          //(1)清除token
          removeToken();
          //(2)清除用户信息
          this.userInfo = {};
          //(3)跳转首页
          this.$router.push({ path: "/login" });
        })
        .catch(() => {
          // 用户点击取消执行的回调
          console.log("catch");
        });
    },
  },
};
</script>



<style lang='less'>
//样式----------------------------------
.user-page {
  .header {
    height: 100px;
    background-color: #009afa;
    //伸缩盒子
    display: flex;
    //垂直居中
    align-items: center;
    .van-image {
      padding: 0px 10px;
    }
    h2 {
      color: #fff;
      font-size: 18px;
    }
  }
  .van-row {
    height: 70px;
    text-align: center;
    .van-col {
      height: 100%;
      font-size: 14px;
    }
    .van-icon {
      font-size: 22px;
      margin-top: 15px;
      margin-bottom: 5px;
      display: block;
    }
  }
}
</style>